<template>
    <el-row :gutter="20">
        <el-col :sm="24">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <h5>关于我们</h5>
                        <div class="card-refresh-btn"><el-button circle @click="initInfo(true)"><el-icon><Refresh /></el-icon></el-button></div>
                    </div>
                </template>
                <div v-safe-html="windowStore.about_html"></div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
    import { ipcRenderer } from 'electron';
    import { h } from 'vue';
    import { Refresh } from '@element-plus/icons-vue'
    import { useWindowStore } from '/src/stores/windowStore';
    import { ElMessage, ElLoading } from 'element-plus'
    export default {
        data() {
            return {
                html: '',
            };
        },
        setup() {
            const windowStore = useWindowStore();
            return { windowStore };
        },
        mounted() {
            this.$nextTick(() => {
                setTimeout(async () => {
                    await this.initInfo(false);
                }, 100); // 延迟 100ms
            });
        },
        methods: {
            //系统（硬件）信息
            async initInfo(state) {
                if (this.windowStore.about_html === null || state) {
                    const loading = ElLoading.service({
                        lock: true,
                        text: 'Loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                    });
                    const result = await ipcRenderer.invoke('about-info');
                    if (result.code == 200) {
                        this.windowStore.updateAbout(result.data);
                    } else {
                        ElMessage({
                            message: result.msg,
                            type: 'error',
                            plain: true,
                        })
                    }
                    setTimeout(() => {
                        loading.close()
                    }, 100)
                }
            }
        }
    };
</script>
<style scoped>
    .el-row {
        margin-top: 10px;
    }
    .card-header h5 {
        margin: 0;
    }

    .card-refresh-btn {
        float: right;
        margin-top: -25px;
        cursor: pointer;
    }

</style>